<template>
  <div>
    <a-form-item label='流程启动类型' v-bind="formItemLayout">
      <a-radio-group button-style="solid" v-model="configData.processUsageType" @change="dataChange">
        <a-radio-button value="01">
          申请表单
        </a-radio-button>
        <a-radio-button value="02">
          应用程序
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-divider>查询表单关联</a-divider>
    <a-form-item label='查询表单标题' v-bind="formItemLayout">
      <a-input v-model="configData.qryFormTitle" @change="dataChange"/>
    </a-form-item>
    <a-form-item label='查询表单类型' v-bind="formItemLayout">
      <a-radio-group button-style="solid" v-model="configData.qryFormType" @change="dataChange">
        <a-radio-button value="0">系统表单</a-radio-button>
        <!--            自定义表单暂未实现-->
        <a-radio-button value="1" disabled>自定义表单</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="configData.qryFormType=='1'" label='查询表单路径' v-bind="formItemLayout">
      <a-input @change="dataChange"/>
    </a-form-item>
    <a-form-item v-if="configData.qryFormType=='0'" label='查询表单关联' v-bind="formItemLayout">
      <a-space direction="vertical">
        <a-select show-search :filter-option="filterOption" v-model="configData.qryFormId" @change="dataChange" style="width: 200px">
          <a-select-option v-for="r in formData" :key="r.formId">{{r.formName}}</a-select-option>
        </a-select>
        <div>
          <a-space>
            <a @click="viewForm()">预览</a>
            <a @click="editForm()">编辑</a>
            <a @click="addForm()">创建</a>
          </a-space>
        </div>
      </a-space>
    </a-form-item>
    <!-- 修改表单配置 -->
    <view-form ref="ViewForm"></view-form>
    <form-config ref="FormConfig" @success="getForms"></form-config>
  </div>
</template>
<script>
import ViewForm from '../../formConfig/ViewForm'
import FormConfig from '../../formConfig/FormConfig'

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}

export default {
  name: 'ProcessConfig',
  components: {ViewForm, FormConfig},
  props: {
    configData: {
      type: Object,
      default: () => ({
        // 对应后端CustomProcess
        qryFormType: '0',
        processUsageType: '01',
        qryFormTitle: '',
        qryFormPath: '',
        qryFormId: ''
      })
    }
  },
  model: {
    prop: 'configData',
    event: 'input'
  },
  data () {
    return {
      imageData: null,
      formItemLayout,
      formData: []
    }
  },
  methods: {
    dataChange () {
      this.$emit('input', this.configData)
    },
    getForms () {
      this.$get('form').then((r) => {
        this.formData = r.data.rows
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    viewForm () {
      // 当前选中的表单json
      let formId = this.configData.qryFormId
      if (formId == null) {
        this.$message.warning('请先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.ViewForm.onOpen(data)
    },
    editForm () {
      let formId = this.configData.qryFormId
      if (formId == null) {
        this.$message.warning('请先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.FormConfig.onOpen(data)
    },
    addForm () {
      let record = {}
      record.formJson = FormConfig.initJSON
      this.$refs.FormConfig.onOpen(record)
    }
  },
  mounted () {
    this.getForms()
  }
}
</script>
